<template>
    <div class="card"> 
      <ul class="pai-item-list">
          <li v-for="(val,i) in lotsCardList" :key="i" class="pai-item">
              <div @click="routeDetail(val)" class="link_wrap">
                  <el-card class="item_card" :body-style="{ padding: '0px' }">
                  <div class="image">
                    <!-- <img src="@/assets/29065392043055d6e199749099f4cadc.jpg" class="lot_pic"> -->
                    <el-image :src="imgurls+ val.image"  @error="defaultSrc" alt="" class="lot_pic"></el-image>
                  </div>
                  
                  <div class="item_content">
                    <div class="item_title">
                      <span>{{val.name}}</span>
                    </div>
                    <div class="item_money">
                      <p>
                        <span v-if="val.state=='1'||val.state=='4'||val.state=='6'">起拍价</span>
                        <span v-if="val.state=='2'">当前价</span>
                        <span v-if="val.state=='3'">成交价</span>

                        <span>{{val.prices}}</span>
                      </p>

                      <div v-if="val.state=='1'" class="item_money_time">
                        <p>预计{{val.time}}开始</p>
                        <p class="start">即将开始</p>
                      </div>
                      <div v-if="val.state=='2'" class="item_money_time">
                        <p>预计{{val.time}}结束</p>
                        <p class="start">正在进行</p>
                      </div>
                      <div v-if="val.state=='3'" class="item_money_time">
                        <p>{{val.time}}结束</p>
                        <p class="start">已成交</p>
                      </div>
                      <div v-if="val.state=='4'" class="item_money_time">
                        <p>{{val.time}}结束</p>
                        <p class="start">已流拍</p>
                      </div>
                      <div v-if="val.state=='5'" class="item_money_time">
                        <p>{{val.time}}结束</p>
                        <p class="start">已撤拍</p>
                      </div>
                      <div v-if="val.state=='6'" class="item_money_time">
                        <p>预计{{val.time}}结束</p>
                        <p class="start">等待拍卖师</p>
                      </div>
                    </div>  
                      <div class="item_bottom clearfix">
                        <div>
                          <span>{{val.viewcount}}次围观</span>
                        </div>
                        <!-- <el-divider direction="vertical"></el-divider> -->
                        <div>
                          <span>2222次出价</span>
                        </div>
                        <!-- <el-divider direction="vertical"></el-divider> -->
                        <div>
                          <i class="el-icon-star-on"></i>
                          <span>关注</span>
                        </div>
                      </div>
                  </div>
              </el-card>
              </div>  
          </li>
      </ul>
       
    </div>
  </template>
  <script>
  import {lotsList} from '@/api/interface'
  export default {
    props: {
      lotsCardData: {
        type: Array
      },
    },
    data() {
      return {
        lotsCardList:[],
        linkWrapHref:''
      };
    },
    created(){
      // console.log('pp',this.lotsCardData);
      this.lotsCardList = this.lotsCardData
      this.getLotsCardList();
    },
    methods: {
      routeDetail(val){
        // this.$router.push({name:'home',params: {id:'1'}})
        this.$router.push('/detail');
        this.$router.push('')
      },
      getLotsCardList(){
        lotsList().then(res=>{
          // console.log(res.data)
          this.lotsCardList=res.data;
        });
      },
      defaultSrc(event){
        const imgNum = this.imgNum + 1;
        this.imgNum = imgNum
        //console.log(imgNum)
        if(imgNum == 1){
          const img = event.srcElement  // 刚开始是以参数的形式定义的，但是默认的图片一直不能使用，遂改为此方式
          const fdsaf = img.src
          const ffff = fdsaf.substring(22);
          if(ffff){
            img.src = 'http://192.168.110.15/'+ffff
            // img.src = 'http://ympai.net/'+ffff
          }else{
            img.onerror = null
          }
        }else{
          
        }
      },
    },
  };
  </script>
  <style lang="less" scoped>
.card{
    .pai-item-list{
      display: flex;
      flex-wrap:wrap;
      justify-content: space-between;
      &::after{
        content: '';
        flex: auto;
        // width: 280px;
      }
      .pai-item{
        margin:10px 10px 0 0;
      }
      .pai-item:nth-child(4n){
        margin:10px 0 0 0;
      }
      .link_wrap{
        position: relative;
        display: inline-block;
        width: 280px;
        height: 355px;
        // .link_wrap:hover{
          // border: 2px solid #67C23A;
        // }
        .item_card{
          
          .image {
            // width: 100%;
            height: 190px;
            // display: block;
            .lot_pic{
              vertical-align: top;
              width: 100%;
              max-height: 100%;
              border: 0;
            }
          }
          .item_content{
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;           
            .item_title{
              height: 56px;
              font-size: 18px;
              
            }
            .item_money{
              font-size: 14px;
              color: rgb(153, 153, 153);
              .item_money_time{
                p{
                  display: inline-block;  
                }
                
                p:last-of-type{
                  font-size: 12px;
                  font-weight: 400;
                  position: absolute;
                  right: 0px;
                  padding: 2px 8px 2px 12px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 12px 0px 0px 12px;
                  background-color: #67C23A;
                  color: #fff;
                }
              }
            }
            .item_money{
              p{
                margin-bottom: 10px;
              }
            }
            .item_bottom{
              height: 40px;
              font-size: 12px;
              line-height: 40px;
              border-top: 1px solid rgb(237, 237, 237);
              display: flex;
              justify-content: space-between;
              color: rgb(153, 153, 153);
            }
          }
        }
        .item_card:hover{
            border: 1px solid #cc0000;
          }

        
        
      }
    }

}
    
    
    
  
  
  </style>